<?php
use yii\helpers\Url;
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/app.css">
    <style>
        .app-register .app-form-button .app-btn-submit{
            width:100%;
        }
        .app-register .app-v-btn{
            width: 5rem;
        }
    </style>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/layer_mobile/layer.js"></script>
    <script src="/js/Validform_v5.1_min.js"></script>
</head>
<body>
    
    <section class="app-page-section">
    
	   	<section class="app-container app-form app-register">
            
            <!-- form -->
            <header>注册</header>
            <div class="app-form-group">
                <select name="group_id" id="group_id" class="app-form-control">
                    <?php
                    $groupList = \common\models\UserGroup::findList();
                    foreach($groupList as $k => $v){
                        echo '<option value="'.$v['group_id'].'">'.$v['group_name'].'</option>';
                    }
                    ?>
                </select>
            </div>
            <div class="app-form-group">
                <input type="text" class="app-form-control" id="mobile" placeholder="手机号码">
            </div>

            <div class="app-form-group">
                <input type="text" class="app-form-control" id="code" placeholder="验证码">
                <button class="app-v-btn" id="get-code">获取验证码</button>
            </div>

            <div class="app-form-button">
                <input type="hidden" name="_csrf-frontend" value="<?= Yii::$app->request->csrfToken ?>">
                <button class="app-form-control app-btn-submit" id="submit">注册</button>
            </div>

        </section>

    </section>
    <script>
        var wait=60;
        var codeUrl = '<?= Url::toRoute(['site/sms']) ?>';
        var submitUrl = '<?= Url::toRoute(['site/do-signup'])?>';
        var _csrf = '<?= Yii::$app->request->csrfToken ?>';
        $(function(){
            function time(o) {
                if (wait == 0) {
                    o.removeAttribute("disabled");
                    o.innerText="免费获取验证码";
                    wait = 60;
                } else {
                    o.setAttribute("disabled", true);
                    o.innerText="重新发送(" + wait + ")";
                    wait--;
                    setTimeout(function() {
                            time(o)
                        },
                        1000)
                }
            }
            
            // 发送验证码
            $('#get-code').click(function(){
                var mobile = $('#mobile').val();
                var msg = '';
                $.post(codeUrl, {"_csrf-frontend":_csrf, mobile:mobile}, function(data){
                    if( data.success == true ){
                        time(document.getElementById('get-code'));
                        msg = '验证码已发送';
                    }else{
                        msg = data.msg;
                    }
                    layer.open({
                        shadeClose: false,
                        content: msg,
                        btn: '确定'
                    });
                    
                }, 'json');
            });
            
            $('#submit').click(function(){
                var mobile = $('#mobile').val();
                var code = $('#code').val();
                $.post(submitUrl, {mobile:mobile, code:code, "_csrf-frontend":_csrf}, function(data){
                    if( data.success == true ){
                        layer.open({
                            shadeClose: false,
                            content: '恭喜您，注册成功',
                            btn: '确定',
                            end: function(){
                                window.location.href = data.data.url;
                            }
                        });
                    }else{
                        layer.open({
                            shadeClose: false,
                            content: data.msg,
                            btn: '确定'
                        });
                    }
                }, 'json');
            })
            
        })
    </script>
</body>
</html>